<template>
  <ZContainer :noPadding="true"
              :noBorder="true"
              class="fa"
              v-loading="loading">
    <div class="fa-item flex items-center">
      <div class="fa-item__left flex-1 flex flex-col">
        <span>2FA</span>
        <span>With this feature enabled, you will have to enter the 2FA Code before each login to protect you account.</span>
      </div>
      <div class="fa-item__action">
        <el-switch :value="tenant.googleAuthentication"
                   @change="onChange"></el-switch>
      </div>
    </div>

    <AuthenticationModal :visible.sync="visible"
                         v-if="visible"
                         @success="onSuccess"
                         admin />

  </ZContainer>
</template>

<script>
import ZContainer from '@/components/storybook/z-container'
import AuthenticationModal from './components/authentication-modal'
import { fetchTenant, updateTenant } from '@/api/new'

export default {
  name: 'Fa',
  components: {
    ZContainer,
    AuthenticationModal
  },
  data () {
    return {
      visible: false,
      loading: false,
      tenant: {
        googleAuthentication: false
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      try {
        this.loading = true

        const [tenant] = await Promise.all([this.getTenant()])

        this.tenant = tenant
      } catch (error) {

      } finally {
        this.loading = false
      }
    },
    async getTenant () {
      const { data: response } = await fetchTenant(this.$store.state.user.tenantCode)

      if (response.code !== 0) {
        throw response.msg
      }

      return Object.assign(this.tenant, response.data || {})
    },
    async onChange (val) {
      try {
        if (!val) {
          await this.$confirm('You are about to turn off 2FA. Please click Turn off to confirm you would like to proceed. ', 'Authentication', {
            confirmButtonText: this.$t('confirm'),
            cancelButtonText: this.$t('cancel'),
            type: 'warning'
          })
        }
        this.visible = true
      } catch (error) {

      }
    },
    async onSuccess () {
      try {
        this.loading = true
        const params = {
          ...this.tenant,
          googleAuthentication: !this.tenant.googleAuthentication
        }

        const { data: response } = await updateTenant(params)

        if (response.code !== 0) {
          throw response.msg
        }

        this.tenant.googleAuthentication = !this.tenant.googleAuthentication
      } catch (error) {

      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fa {
  padding: 4px 16px;
  &-item {
    padding: 12px 0;
    border-bottom: 1px solid #dde1e6;
    &__left {
      span:nth-of-type(1) {
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        font-weight: 700;
        font-size: 16px;
        line-height: 24px;
      }
      span:nth-of-type(2) {
        font-weight: 400;
        color: rgba(0, 0, 0, 0.61);
        font-size: 12px;
        line-height: 16px;
      }
    }
  }
}
</style>